<template>
    <div class="Departments">
        <!--        面包导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>寝室管理</el-breadcrumb-item>
            <el-breadcrumb-item>楼层管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!--        卡片-->
        <el-card class="box-card">
            <!--            搜索区域-->
            <el-row :gutter="20">
            </el-row>
            <!--            表格区域-->
            <el-table :data="buildingList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="楼栋名" prop="bname"></el-table-column>
                <el-table-column label="寝室名" prop="qname"></el-table-column>
                <el-table-column label="人数" prop="type">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.type ===0">四人</el-tag>
                        <el-tag type="success" v-else-if="scope.row.type ===1">六人</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作"  width="180px">
                    <template slot-scope="scope">
                        <!--                            查看寝室物品-->
                        <el-tooltip effect="dark" content="查看寝室物品" placement="top" :enterable="false">
                            <el-button type="warning" icon="el-icon-setting" size="mini" @click="goodsShow(scope.row.id)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!--                分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.page"
                    :page-sizes="[5,10,20,50]"
                    :page-size="queryInfo.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total" @close="bookGoods">
            </el-pagination>
        </el-card>
        <!--        物品展示-->
        <el-dialog
                title="物品信息"
                :visible.sync="goodsDialogVisible"
                width="50%" >
            <el-table :data="goodsList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="物品名字" prop="iname"></el-table-column>
                <el-table-column label="数量" prop="number"></el-table-column>

            </el-table>
            <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="goodsDialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Departments",
        data(){
            return{
                //楼栋列表
                buildingList: [],
                queryInfo:{
                    page: 1,
                    size: 10
                },
                total: 0,
                //物品展示框显示
                goodsDialogVisible: false,
                //物品列表
                goodsList: []

            }
        },
        created() {
            this.getAllLoudong()
        },
        methods:{
            //获取楼栋列表
            async getAllLoudong(){
               const {data:res} = await this.$http.get('Departments/getAllDepartmentInfo',{
                   params: this.queryInfo
               })
                if(res.code !==200) return this.$message.error(res.message)
                this.buildingList = res.data.data
                this.total = res.data.total
            },
            //监听pagesize的改变
            handleSizeChange(newSize){
                this.queryInfo.size = newSize
                this.getAllLoudong()
            },
            //页码值改变
            handleCurrentChange(newPage){
                this.queryInfo.page = newPage
                this.getAllLoudong()
            },
            //显示物品
            async goodsShow(gInfo){
                this.goodsDialogVisible = true
                const {data:ref} = await this.$http.get('Departments/getAllGoods',{
                    params:{
                        id: gInfo
                    }
                })
                if(ref.code !=200) return  this.$message.error(ref.message)
                this.goodsList = ref.data
            },
            //关闭物品框
            bookGoods(){
                this.goodsList = []
            }
        }
    }
</script>

<style scoped>

</style>